<template>
    <div class="container">
        <div class="msg" v-if="isShow">
            <!-- 获取用户头像 -->
            <img :src="userInfo.avatarUrl"/>
            <div>欢迎 <span class="name">{{userInfo.nickName}}</span> 来到微信小程序</div>
        </div>
        <!-- 获取用户信息 -->
        <div class="getInfo" v-else>
            <button open-type="getUserInfo" size="mini" @getuserinfo="onGotUserInfo">授权获取用户信息</button>
        </div>
        <button type='primary' size="mini" class="btnStart" @tap="start">开启小程序之旅</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 用户信息
            userInfo:{},
            isShow:false
        }
    },
    created(){
       
    },
    mounted(){
         this.getUserInfo();
    },
    methods:{
        start(){
            wx.navigateTo({
                url:"../list/main"
            });
        },
        getUserInfo() {
            let that = this;
            wx.getUserInfo({
                success(data){
                    that.userInfo = JSON.parse(data.rawData);
                    that.isShow = true;
                    // console.log(data);
                    // console.log(that.userInfo);
                },
                fail(data){
                    // 用户信息获取失败
                    console.log(data);
                }
            });
        },
        onGotUserInfo() {
            this.isShow = true;
            this.getUserInfo();
        }
    }
}
</script>
<style >
    page
    {
        background-color:#1E4AFF;
    }
    .container,
    .msg {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .msg img {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        margin: 80rpx 0 20rpx 0;
        
    }
    .msg div {
        font-size: 24rpx;
    }
    .getInfo {
        margin-top: 40rpx;
    }
    .btnStart {
        margin-top: 40rpx;
    }
    .name {
        font-size: 30rpx;
        color: pink;
    }
</style>


